of

轉換 個別參數 成為 observable 序列
https://rxjs-dev.firebaseapp.com/api/index/function/of

component.ts
-----
export class RxjsPracticeComponent implements OnInit {
ofValue = 0;

ngOnInit() {
        of(1,2,3).subscribe(
            x => {
                this.ofValue += x;
        })
    }
}

html
-----
{{ofValue}}

顯示

pipe

pipe<T, R>(...fns: Array<UnaryFunction<T, R>>): UnaryFunction<T, R>
https://rxjs-dev.firebaseapp.com/api/index/function/pipe

備註：UnaryFunction (中文：一元函式)

目前使用上只要是回傳值不是 Observable 幾乎都放在 pipe 內

timer

timer(5000)：延遲 5 秒後，emit(中文：發射)一個 0
timer(5000,2000)：延遲 5 秒後，emit 0 ，每隔 2 秒 emit 剛剛 0 的累加值

tap

從 來源的 observale 的每個 emission (中文：發射(名詞)) 執行 side effect， 但回傳的 observable 還是原先的來源
https://rxjs-dev.firebaseapp.com/api/operators/tap

component.ts
-----
tapValue = '';
tapFinalValue = '';
ngOnInit() {
    const clicks = fromEvent(document, 'click');
    const positions = clicks.pipe(
        tap(ev => {
            this.tapValue = `x:${ev['clientX']} y:${ev['clientY']}`
        }),
        map(ev => ev['clientX']),
    );
    positions.subscribe(x => this.tapFinalValue = x);
}

html
-----
tapValue:{{tapValue}}
tapFinalValue:{{tapFinalValue}}

顯示

debounceTime(中文：去除彈跳時間)

僅在經過特定時間且途中沒有其他 來源 emission (發射) ，之後才從 來源Observable 發出值
https://rxjs-dev.firebaseapp.com/api/operators/debounceTime

component.ts
-----
const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(
    map(ev => ev['clientX']),
    debounceTime(5000)
);
positions.subscribe(x => this.tapFinalValue = x);

點擊滑鼠後過五秒，tapFinalValue 才會有值，若五秒內又點擊就要再等五秒才會送出值

switchMap

將每個來源值 投影到一個Observable，該 Observable 在輸出 Observable 中合併，僅從最近投影的 Observable 中發出值。
https://rxjs-dev.firebaseapp.com/api/operators/switchMap

component.ts
-----
const clicks = fromEvent(document, 'click');
const positions = clicks.pipe(
    tap(ev => {
        console.log(ev);
        this.tapValue = `x:${ev['clientX']} y:${ev['clientY']}`
    }),
    map(ev => ev['clientX']),
    switchMap((ev) => interval(1000))
);
positions.subscribe(x => this.tapFinalValue = Number(x));

點擊後，tapFinalValue 會從 0 開始累加 1 ，再次點擊 從 0 再次開始累加 1 ，原先的 clientX 已經利用 switchMap 取代掉了。

distinctUntilChanged

回傳一個Observable，它發出 來源Observable發出的所有項目，這些項目與前一項，相比是不同的。
https://rxjs-dev.firebaseapp.com/api/operators/distinctUntilChanged

component.ts
-----
ofValue = '';

of(1, 1, 1, 1, 2, 3)
.pipe(distinctUntilChanged())
.subscribe(
    x => {
        this.ofValue += x;
    },
    error => {console.log(error)}
)

ofValue 的值會是 '123'，重複的值就不會再出現！